<template>
  <el-carousel
    v-if="dicomData.length > 0"
    height="200px"
    indicator-position="none"
    :autoplay="false"
  >
    <el-carousel-item v-for="item in dicomData[0].seriesList" :key="item.serId">
      <el-image
        :src="dicomData[0].urlPublic + item.thumbnail"
        class="dicom-image"
        @click="handleOpenView"
      />
    </el-carousel-item>
  </el-carousel>
  <empty v-else />
</template>

<script lang="ts" setup>
import { defineProps, PropType } from 'vue'

import Empty from '@/components/EmptyBlock/index.vue'

import { openViewer } from '@/utils/common/openViewer'

import { DCM_MODULE_FLAG_MAP, ISSUES_STATUS_MAP } from '@/configs/codeMaps'
import IBaseObj from '#/index'

const props = defineProps({
  dicomData: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  vid: {
    type: [String, Number],
    default: '',
  },
  isQc: {
    type: Boolean,
    default: false,
  },
  issuesStatus: {
    type: [String, Number],
    default: '',
  },
})

const handleOpenView = () => {
  let moduleFlag = DCM_MODULE_FLAG_MAP.chakan
  if (props.isQc) {
    // 质控且不是正常或者完成状态下传DCM_MODULE_FLAG_MAP.zhikong
    if (
      props.issuesStatus !== ISSUES_STATUS_MAP.zhengchang &&
      props.issuesStatus !== ISSUES_STATUS_MAP.wancheng
    ) {
      moduleFlag = DCM_MODULE_FLAG_MAP.zhikong
    }
  }
  openViewer(
    {
      vid: props.vid,
    },
    moduleFlag
  )
}
</script>

<style lang="scss" scoped>
.dicom-image {
  width: 200px;
  height: 100%;
  margin: 0 auto;
  cursor: pointer;
}

:deep() {
  .el-carousel {
    &__item {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
